<template>
	<view class="management_case">
		<view class="manage_box">
			<view class="f17">指挥中心{{name}}派遣描述</view>
			<view class="manage_dis">
				{{remark?remark:'暂无'}}
			</view>
		</view>
		<view class="address">
			<view class="flex addressFlex">
				<view class="">当前位置：</view>
				<input type="text" value="" placeholder="请输入案件位置" v-model="currentAddress" class="f14"  />
			</view>
			<image src="../../static/images/bg_03.png" mode="" class="images" @click="getCurretAddress"></image>
		</view>
		<view class="uniCanal">
			<view>处置后照片：</view>
			<view class="uni-Camera">
				<view class="imageAll"  v-if="imagesArr && imagesArr.length > 0">
					<view class="image-box" v-for="(item, index) in imagesArr" :key="index">
						<image class="selectImg" :src="item" mode="aspectFit" alt="" @click="showImage(item)">
							<i class="closeImg" @click="deleteImg(index)"></i>
					</view>
				</view>
				<view class="uni-Camera-zero" @click="takePictures"  v-if="imagesArr.length<3">+</view>
			</view>
			<view class="smallWarn">
				*请在拍照时，确保事件的环境位置关系与拍摄全景，如一张照片无法表现时，可拍摄多张！
			</view>
		</view>
		<view class="uni-back">
			<view>待{{name}}反馈：</view>
			<textarea value="" placeholder="请输入反馈内容" v-model="eventDescribe" maxlength="250"/>
		</view>
		<view class="flex buttons">
			<view   @click="showAlert">提交</view>
		</view>
	</view>
</template>

<script>
	import globalTime from '../../common/getTimeqj.js'
	import {getEvenCode,Dealevent} from '../../util/api.js'
	import URL from '../../util/url.js'
	export default {
		data() {
			return{
				//用户登录信息
				name:'',
				userInfor: uni.getStorageSync('userInfor'),
				imagesArr: [],
				
				eventId: '',
				//案件的坐标
				gdx: '',
				gdy: '',
				//案件描述
				eventDescribe: '',
				//案件图片
				paramsImages: [],
				//当前处置人员位置
				currentx: '',
				currenty: '',
				currentAddress: '',
				//判断当前是从哪进的
				current_handing_type: '',
				//秒数 中心
				typeCode:'',
				remark:'',//派遣描述 
				eventItem:'',
			}
		},
		onLoad(options) {
			//判断当前是从哪进的
			this.current_handing_type = options.current_handing_type;
			this.eventItem = JSON.parse(options.eventItem)
			console.log(this.eventItem)
			this.currentAddress = '';
			//案件位置
			this.eventId = options.eventId;
			this.gdx = options.gdx;
			this.gdy = options.gdy;
			//获取指挥中心描述
			// 修改页面标题
			if (this.current_handing_type == 1) {
				uni.setNavigationBarTitle({
					title: '案件核实'
				});
				this.name = '核实'
				this.typeCode = '0001'
			} else if (this.current_handing_type == 2) {
				uni.setNavigationBarTitle({
					title: '案件核查'
				});
				this.name = '核查'
				this.typeCode = '0010'
				this.getDescrad()
			} else if (this.current_handing_type == 3) {
				uni.setNavigationBarTitle({
					title: '案件回退'
				});
				this.name = '回退'
			}else if (this.current_handing_type == 4) {
				uni.setNavigationBarTitle({
					title: '案件处置'
				});
				this.name = '处置'
			}
		
		},
		onShow() {
			//处置人员当前位置信息
			let currentLocation = uni.getStorageSync('currentLocation1');
			this.currentx = currentLocation.currentx||'108.94866';
			this.currenty = currentLocation.currenty||'34.214064';
			this.currentAddress = currentLocation.currentAddress||'';
		},
		methods:{
			//提交 核实 与核查都是一个接口
			showAlert() {
				if (this.current_handing_type == 1 || this.current_handing_type == 2) {
					if (this.currentAddress == '' || this.currentAddress == undefined) {
						this.$toast.showToast('请输入案件位置');
						return;
					}
				}
				if (this.current_handing_type == 1 || this.current_handing_type == 2) {
					if (this.paramsImages.length == 0) {
						this.$toast.showToast('请选择图片或进行拍照');
						return;
					}
				}
				if (this.current_handing_type == 1 || this.current_handing_type == 2) {
					if (this.eventDescribe == '') {
						this.$toast.showToast('请输入反馈内容');
						return;
					}
				}
			
				let _this = this,
					options = {},
					url = null;
				var images = JSON.stringify(this.paramsImages);
				if (this.current_handing_type == 2 ||this.current_handing_type == 1) {
					url = Dealevent;
					options = {
						eventId:this.eventId,
						createUser:this.userInfor.userId,
						remark:this.eventDescribe,
						eventAddress:this.currentAddress,
						beforeImg:images,
						eventDealStatus:this.eventItem.eventDealStatus,
						eventStatus:this.eventItem.eventStatus,
					}
				}
				uni.showLoading();
				url(options).then((res) => {
					uni.hideLoading();
					if (res.code === 200) {
						this.$toast.showToast('提交成功');
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/pageList/pageList'
								// url:'/pages/detailPage/detailPage?eventItem='+JSON.stringify(this.eventItem)
							})
						}, 1000)
					} else {
						this.$toast.showToast(res.msg);
					}
				}).catch((error) => {
					uni.hideLoading();
				})
			},
			getDescrad(){
				var parse={
					eventId:this.eventId,
					typeCode:this.typeCode,
				}
				getEvenCode(parse).then((res)=>{
					if(res.code == 200){
						this.remark = res.data.remark
					}else{
						this.$toast.showToast(res.msg)
					}
				}).catch((err)=>{
					console.log(err)
				})
			},
			getCurretAddress() {
				uni.navigateTo({
					url: '/pages/detailPage/pendingCaseMap?gdx=' + this.gdx + '&gdy=' + this.gdy + '&mtype=2'
				})
			},
			//调手机相册或相机
			takePictures() {
				let _this = this;
				// 选择图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'],
					success: function(res) {
						uni.showLoading({
						    title: '正在上传图片',
							mask: true
						});
						_this.imagesArr.push(res.tempFilePaths[0]);
						uni.uploadFile({
							header:{
								'Authorization': 'bearer ' + uni.getStorageSync('token'),
							},
							url: URL.Upload1,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: function(uploadFileRes) {
								console.log(uploadFileRes)
								uni.hideLoading();
								let res = JSON.parse(uploadFileRes.data);
								if (res.code === 200) {
									_this.paramsImages.push({
										"image": URL.IMAGEURL1 + res.fileName,
									});
								}else {
									this.$toast.showToast('请重新拍照');
								}
							},
							fail(err) {
								console.log(err)
								uni.hideLoading();
							}
						})
					}
				});
			},
			//点击图片放大
			showImage(item) {
				let _this = this;
				uni.previewImage({
					urls: _this.imagesArr,
					current: item,
					longPressActions: {
						//itemList: ['发送给朋友', '保存图片', '收藏'],//按钮的文字数组
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			// 删除本地图片：未上传
			deleteImg(index) {
				this.imagesArr.splice(index, 1);
				this.paramsImages.splice(index, 1);
			},
		}
	}
</script>

<style scoped lang="scss">
	.management_case {
		height: calc(100% - 48rpx);
		margin: 0 auto;
		padding: 30rpx;
		background: #fff;
		.manage_box{
			.manage_dis{
				margin-top: 20rpx;
				font-size: 14px;
				color: #919293;
			}
		}
		.address{
			border: 1px solid #C0C0C0;
			display: flex;
			color: #919293;
			margin: 30rpx 0px;
			padding: 5px;
			border-radius: 5px;
			.addressFlex{
				display: flex;
				flex: 1;
				input{
					flex: 1;
				}
			}
			.images{
				width: 19px;
				height: 20px;
			}
		}
		.uniCanal{
			margin-bottom: 20rpx;
			.smallWarn{
				color: #B85F5B;;
				font-size: 12px;
				margin-top: 10rpx;
			}
			.uni-Camera {
				width: 100%;
				display: flex;
				margin-top: 10rpx;
				.imageAll{
					display: flex;
					.image-box{
						width: 145rpx;
						height: 145rpx;
						border: 1px solid #C0C0C0;
						margin-right: 10px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						&:nth-of-type(3n) {
							margin-right: 0;
						}
						
						uni-image {
							width: 100%;
							height: 100%;
						}
						
						.closeImg {
							//带_的是微信小程序的样式
							position: absolute;
							top: -6px;
							right: -6px;
							width: 16px;
							height: 16px;
							background: red;
							border-radius: 50%;
							line-height: 13px;
							text-align: center;
						
							&:before {
								content: '×';
								color: #fff;
							}
						}
					}
				}
				.uni-Camera-zero {
					width: 145rpx;
					height: 145rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #C0C0C0;
					font-size: 40px;
				}
			}
		}
		.uni-back{
			textarea{
				width: 100%;
				margin-top: 10rpx;
				border: 1px solid #C0C0C0;
				font-size: 14px;
			}
		}
		.buttons{
			position: absolute;
			bottom: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			view{
				width: 356rpx;
				height: 90rpx;
				border-radius: 10rpx;
				font-size: 16px;
				background-color: #4A8CEF;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
		}
	}
</style>
